﻿@import "scss/_rem.scss";
@import "scss/_normalize.scss";
@import "scss/_variables.scss";
@import "scss/_mixins.scss";
@import "scss/_common.scss";
@import "scss/_menu_mobile.scss";

*{
    box-sizing:border-box;
}
html {
    font-size: 16px;
}
html,body{
    height:100%;margin:0;padding:0;
}

body {
    font-size: 16px;font-family: 'Microsoft YaHei', Tahoma, Geneva, Verdana, sans-serif;
}
.page-home {
    height: 100%;
    position: relative;
    overflow: hidden;
    background:url(../img/m_home.png) no-repeat center top;
    background-size:cover;

}


.logo{
    position:fixed;top:8px;left:8px;z-index:1000;
    width:65px;
    img{
        width:100%;
    }
}

.about-top {
    text-align: center;
    background: url(../img/banner_about.jpg) no-repeat center center;
    background-size: cover;
    height: 302px;
    color: #fff;
    position: relative;

    section {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 100;       
    }

    h1 {
        font-family: 'Baloo Paaji', cursive;
        font-style: italic;
        font-size: rem(48px);
        font-weight: normal;
        margin: 0;
    }

    h2 {
        font-size: rem(24px);
        margin: 0 0 25px;
        font-weight: normal;
    }

    p {
        line-height: 2.6;
        margin: 0;
        padding: 0;
    }
}
.about-bot {
    padding-top: rem(20px);
    padding-bottom: rem(30px);
    text-align: center;
    color: $color_main;

    p {
        line-height: 1.8;
        font-size: rem(12px);
    }

    .pic1 {
        img {
            width: rem(75px);
        }
    }

    .pic2 {
        img {
            width: rem(72px);
        }
    }
}


.page-celebs {
    padding-bottom: 0;
    height: 100%;



    .item {
        display: block;
        height: 33.3333333%;
        text-decoration: none;


        &.i1 {
            background: no-repeat url(../img/m_01.png) center center;
            background-size: cover;
        }

        &.i2 {
            background: no-repeat url(../img/m_02.png) center center;
            background-size: cover;
        }

        &.i3 {
            background: no-repeat url(../img/m_03.png) center center;
            background-size: cover;
        }
    }
}

.contact-top {
    background: url(../img/banner_contact.jpg) no-repeat center center;

    h2 {
        margin: 0;
    }

 
}
.contact-bot {
    padding-top:70px;
    padding-bottom:70px;
    color:$color_main;
    .contact {
        margin:25px 0;padding:0;list-style:none;
        li{
            padding:15px 0;
        }
    }
}
.dsl-form {
    .form-group {
        margin-bottom: 15px;
    }

    input {
        width: 100%;
        height: 50px;
        background-color: #fafafa;
        padding: 8px 15px;
        border: 1px #e8e8e8 solid;
        margin-bottom: rem(5px);
    }

    textarea {
        width: 100%;
        background-color: #fafafa;
        padding: 8px 15px;
        border: 1px #e8e8e8 solid;
        margin-bottom: rem(5px);
    }

    .btn {
        width: 89px;
        height: 35px;
        background-color: $color_main;
        color: #fff;
        border: none;
    }

    .field-validation-error {
        color: $color_sub2;
    }
}

.page-product-detail {
    background: #b9e3f9 url(../img/P1_1_01.jpg) no-repeat center top;
    background-size: auto rem(310px);
    padding-top: 70px;


    .txt {
        margin-bottom: rem(8px);margin-top:rem(-10px);
    }

    .content {
        position: relative;
        padding-bottom: 300px;

        .p4 {
            position: absolute;
            right: rem(15px);
            top: rem(116px);
            z-index: 300;
            width: rem(50px);
        }

        .thumb{
            margin:0 -5px;
        }
    }

    .mainpic {
        padding-top: rem(35px);
        margin-bottom: 30px;

        img {
            margin: 0 auto;
        }
    }

    .item {
        text-align: center;
        color: #183090;

        h3 {
            font-size: 24px;
            margin: 0;
            font-weight: normal;
        }

        p {
            font-size: 14px;
            margin: 0;
        }
    }

    .p6 {
        position: absolute;
        left: 50%;
        margin-left: rem(-75px);
        bottom: 0;
        z-index: 100;
        width: rem(150px);
    }
}

.page-footer {
   
    background-color: $color_main;
    color: #fff;
    font-size: 14px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: rem(12px);

    img {
        max-width: 100%;
    }
}
